<!-- 修改用户名 changeUsername  -->
<template>
	<view>
		<!-- 标题栏 -->
		<view class="head-box ss-m-b-60">
			<view class="head-title ss-m-b-20">修改用户名</view>
			<!-- <view class="head-subtitle">用户名仅限修改一次</view> -->
		</view>

		<!-- 表单项 -->
		<uni-forms
			ref="formRef"
			v-model="state.model"
			:rules="state.rules"
			validateTrigger="bind"
			labelWidth="140"
			labelAlign="center"
		>
			<uni-forms-item name="username" label="用户名">
				<uni-easyinput
					placeholder="请输入用户名"
					v-model="state.model.username"
					:inputBorder="false"
				></uni-easyinput>
			</uni-forms-item>

			<view class="editPwd-btn-box ss-m-t-80">
				<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="changeUsernameSubmit">
					保存
				</button>
			</view>
		</uni-forms>
	</view>
</template>

<script setup>
	import { computed, watch, ref, reactive, unref } from 'vue';
	import { username } from '/shop/validate/form';
	import { showAuthModal, closeAuthModal } from '/shop/hooks/useModal';
	import user from '/shop/store/user.js';
	import $user from '/shop/api/user.js';
	const formRef = ref(null);

	// 数据
	const state = reactive({
		model: {
			username: '',
		},
		rules: {
			username,
		},
	});

	// 7.修改用户名
	async function changeUsernameSubmit() {
		const validate = await unref(formRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;
		$user.changeUsername(state.model).then((res) => {
			if (res.code === '0') {
				user().getInfo();
				closeAuthModal();
			}
		});
	}
</script>

<style lang="scss" scoped>
	@import '../index.scss';
</style>
